<template>
  <div class="center_div">
    <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;margin-top: 20px">
      <el-tab-pane  name="会议安排" >
        <span slot="label"><el-badge :value="notifyNum" :max="10" class="item">会议安排</el-badge></span>
        <el-table :data="reserveMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="employeename" label="发起人" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="120"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="reservationtime" label="会议预定时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="会议描述" min-width="120" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" min-width="120" align="center">
            <template slot-scope="scope">
              <el-button type="success" v-loading="peopleLoading" @click="lookPeople(scope.row.meetingid)">参会人员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="过期的会议" name="过期的会议">
        <el-table :data="untimeMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="employeename" label="发起人" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="120"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="reservationtime" label="会议预定时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="会议描述" min-width="120" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" min-width="120" align="center">
            <template slot-scope="scope">
              <el-button type="success" v-loading="peopleLoading" @click="lookPeople(scope.row.meetingid)">参会人员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已取消的会议" name="已取消的会议">
        <el-table :data="cancelMeeting"  v-loading="tableLoading" element-loading-text="Loading">
          <el-table-column prop="meetingname" label="会议名称" min-width="90"></el-table-column>
          <el-table-column prop="roomname" label="会议室名称" min-width="90"></el-table-column>
          <el-table-column prop="employeename" label="发起人" min-width="90"></el-table-column>
          <el-table-column prop="starttime" label="会议开始时间" min-width="120"></el-table-column>
          <el-table-column prop="endtime" label="会议结束时间" min-width="120"></el-table-column>
          <el-table-column prop="canceledtime" label="会议取消时间" min-width="120"></el-table-column>
          <el-table-column prop="description" label="会议描述" min-width="120" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" min-width="90" align="center">
            <template slot-scope="scope">
                <el-button type="success" v-loading="peopleLoading" @click="lookPeople(scope.row.meetingid)">参会人员</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
            title="参会人员"
            :visible.sync="drawerShow"
            width="30%">
      <ul>
        <li v-for="item in people" :key="item.username" style="margin-top: 20px; margin-left: 30%">
          <el-tag type="primary">
            <span v-if="item.role === 0">员工</span>
            <span v-if="item.role === 1">组长</span>
            <span v-if="item.role === 2">部长</span>
            {{item.employeename}} - {{item.username}}
          </el-tag>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
    <el-button @click="drawerShow = false">关 闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: '会议安排',
        notifyNum: 13,
        reserveMeeting: [
          {meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
          {meetingname: '测试2',roomname: '公共会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
          {meetingname: '测试3',roomname: '专用会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
          {meetingname: '测试4',roomname: '公共会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
          {meetingname: '测试5',roomname: '专用会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'},
          {meetingname: '测试6',roomname: '公共会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用'}
        ],
        untimeMeeting: [
          {meetingname: '测试1',roomname: '专用会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'},
          {meetingname: '测试2',roomname: '公共会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'},
          {meetingname: '测试3',roomname: '专用会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'},
          {meetingname: '测试4',roomname: '公共会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'},
          {meetingname: '测试5',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'},
          {meetingname: '测试6',roomname: '公共会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', reservationtime: '2020-01-01 11:11:11', description: '着急用会议室'}
        ],
        cancelMeeting: [
          {meetingname: '测试1',roomname: '专用会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
          {meetingname: '测试2',roomname: '公共会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
          {meetingname: '测试3',roomname: '专用会议室',employeename: '魏小肖',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
          {meetingname: '测试4',roomname: '公共会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
          {meetingname: '测试5',roomname: '专用会议室',employeename: '李大二',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'},
          {meetingname: '测试6',roomname: '公共会议室',employeename: '王小五',starttime: '2020-01-02 11:11:11',endtime: '2020-01-03 11:11:11', canceledtime: '2020-01-01 11:11:11', description: '不用了，垃圾会议室'}
        ],
        tableLoading: false,
        people: [
                {role:2, employeename: "李大二",username: "lide"},
                {role:1, employeename: "魏小肖",username: "weixx"},
                {role:0, employeename: "王小五",username: "wangxw"},
                {role:0, employeename: "杜小满",username: "duxm"}
                ],
        peopleLoading: false,
        drawerShow: false
      }
    },
    created() {
      this.fetchMeeting()
    },
    methods: {
      async fetchMeeting(){
          this.tableLoading = false
          let {code ,data ,msg} = await this.$post('/mymeetings')
          if(code === 200) {
              this.reserveMeeting = data.userful
              this.notifyNum = data.userful.length
              this.untimeMeeting = data.unuserful
              this.cancelMeeting = data.cancel

              // let times = ['starttime','endtime','canceledtime','reservationtime']
              let meeting = ['reserveMeeting','cancelMeeting','untimeMeeting']
              this.$formatDateForObjectInArray(this,meeting)
          }else {
              this.$message.error(msg)
          }
        this.tableLoading = false
      },
      async lookPeople(id) {
        console.log(id)
        this.people = []
        this.peopleLoading = true
        let {code ,data ,msg} = await this.$post('/meetingdetails',{
          data: {id: id}
        })
        if(code === 200) {
          for (let i = 0; i < data.people.length; i++){
            if (data.people[i]) {
              this.people.push (data.people[i])
            }
          }
        }else {
          this.$message.error(msg)
        }
        console.log(this.people)
        this.peopleLoading = false
        this.drawerShow = true
      },
      handleClick(key){
        console.log(key)
      }
    }

  }
</script>

<style>
  .center_div{
    width: 60%;
    margin:0 auto;
    margin-bottom: 50px;
  }
  .el-badge__content.is-fixed {
    top: 10px;
    right: 2px;
  }
</style>